<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 56%;
            border: 1px solid black;
            /* border-spacing：指定边框之间的距离 */
            /* border-spacing 0px */

            /* border-collaspe ： collapse;设置边框的合并 */
            border-collapse: collapse;
         }
         td{
            border:1px solid black;
            height: 100px;
            /* 默认情况下元素在td中是垂直剧中的，可以通过vertical-align来修改 */
            vertical-align: top;
         }
         /* 
          如果表格·中没有tbody而是直接使用tr,
               那么浏览器会自动创建一个tbody，并且将所有的tr作为tbody的子元素
               tr不是table的子元素
         */
    </style>
</head>
<body>
    <table border="1" width="50%" align="center">
        <!-- 
         可以将一个表格分成三个部分：
         头部 thead
         主体 tbody
         尾部 tfoot
         th 表示头部的单元格
        -->
        <thead> 
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>合计</td>
                <td>2</td>
        </tfoot>
    </table>
</body>
</html>